<!-- 选择标签 -->
<template>
	<view class="panel" v-show="visible">
		<view class="container" :style="{'padding-bottom': safeAreaBottom + 'px'}" :class="{'show': isShowContent}">
			<view class="header">
				<text class="title">选择标签</text>
				<button class="close-btn btn-transition-scale9 iconfont" @click="handleClose()">&#xe60d;</button>
			</view>
			<view class="body">
				<text class="tag" v-for="item in tags" :key="item.id" :class="{'active': item.isChecked}"
					@click="handleTagCheck(item)">{{item.name}}</text>
			</view>
			<view class="footer" :style="{'padding-bottom': safeAreaBottom === 0? '20rpx': '0rpx'}">
				<button class="btn btn-transition-scale95" @click="handleConfirm()">确 认</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import api from "@/api/index.js";
	import { ref, watch, onMounted } from 'vue';

	const emits = defineEmits(['update:visible', 'change']);
	const props = defineProps({
		checkedTagIds: { // 回显已选中的标签
			type: String,
			default: ''
		}
	});
	const visible = defineModel('visible');
	const safeAreaBottom = getApp().globalData.safeAreaBottom; // 底部安全区域高度
	const isShowContent = ref(false); // 是否显示内容区域
	const tags = ref([]); // 标签

	onMounted(() => {
		getTabs(); // 获取标签列表
	});

	// 获取标签列表
	const getTabs = async () => {
		const res = await api.user_api.getTags({ category_id: '1' });
		res.data.data.forEach(item => {
			item.isChecked = false;
		});
		tags.value = res.data.data;
	}

	// 处理回显的标签
	watch(() => props.checkedTagIds, (ids) => {
		if (!ids.length) {
			tags.value.forEach(item => {
				item.isChecked = false;
			});
		} else {
			const idArray = ids.split(',');
			tags.value.forEach(item => {
				item.isChecked = idArray.includes(item.id);
			});
		}
	});

	// 进场动画
	watch(() => visible.value, (value) => {
		if (value) {
			setTimeout(() => {
				isShowContent.value = true;
			}, 30);
		}
	});

	// 退场动画
	const handleClose = () => {
		isShowContent.value = false;
		setTimeout(() => {
			emits('update:visible', false);
		}, 200);
	}

	// 选择标签
	const handleTagCheck = (row) => {
		row.isChecked = !row.isChecked;
	}

	// 点击确定
	const handleConfirm = () => {
		const result = tags.value.filter(item => item.isChecked);
		emits('change', result);
		handleClose();
	}
</script>

<style lang="scss" scoped>
	.panel {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
	}

	.container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: white;
		border-radius: 35rpx 35rpx 0 0;
		padding-top: 50rpx;
		transform: translateY(100%);
		transition: transform 0.2s;

		&.show {
			transform: translateY(0%);
		}

		.header {
			position: relative;
			text-align: center;

			.title {
				font-weight: bold;
				font-size: 36rpx;
				color: #222222;
				font-weight: bold;
			}

			.close-btn {
				position: absolute;
				top: 50%;
				right: 34rpx;
				transform: translateY(-50%);
				font-size: 30rpx;
				color: #999999;
				background-color: transparent;
			}
		}

		.body {
			min-height: 300rpx;
			max-height: 600rpx;
			overflow-y: auto;
			padding: 34rpx 38rpx 56rpx 18rpx;

			.tag {
				display: inline-block;
				min-width: 134rpx;
				height: 54rpx;
				font-size: 24rpx;
				color: #222222;
				text-align: center;
				line-height: 54rpx;
				background-color: #F2F2F4;
				border-radius: 30rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				margin: 20rpx 0 0 20rpx;

				&.active {
					color: #FE3333;
					background-color: #FFDDDD;
				}
			}
		}

		.footer {
			padding: 0 63rpx;

			.btn {
				width: 100%;
				height: 88rpx;
				font-size: 28rpx;
				color: white;
				text-align: center;
				line-height: 88rpx;
				border-radius: 44rpx;
				background-color: #FE3333;
			}
		}
	}
</style>